import React, { useState, useEffect, useMemo, useCallback, useReducer } from 'react'
import './style/cuboid.scss'
// import useCtrlBoard from '../customHooks/useCtrlBoard'
const reducer = (state, action) => {
    const v = action.payload
    const obj = {}
    obj[action.type] = v
    return { ...state, ...obj }
}
export default ({ size = {}, rotation = {}, bg = {}, style = {}, text = {}, debug, className }) => {
    const { x: _x, y: _y, z: _z } = size
    const { x: _rX, y: _rY, z: _rZ } = rotation;
    const { f: _bgF, b: _bgB, t: _bgT, bt: _bgBt, l: _bgL, r: _bgR } = bg;
    const { f: _txtF, b: _txtB, t: _txtT, bt: _txtBT, l: _txtL, r: _txtR } = text;

    // 初始化各参数值
    const [{ rX, rY, rZ, x, y, z, bgF, bgB, bgT, bgBt, bgL, bgR }, dispatch] = useReducer(reducer, {
        rX: _rX || 0,
        rY: _rY || 0,
        rZ: _rZ || 0,
        x: _x || 400,
        y: _y || 200,
        z: _z || 100,
        bgF: _bgF || '',
        bgB: _bgB || '',
        bgT: _bgT || '',
        bgBt: _bgBt || '',
        bgL: _bgL || '',
        bgR: _bgR || '',
    })
    return (<>
        <div className={'m-cuboid ' + className} style={style}>
            <div className={'box'} style={{ width: x, height: y, transform: `rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg) ` }}>
                <div className='front' style={{ width: x, height: y, transform: `translateZ(${z / 2}px)`, background: bgF }}>{_txtF || debug && '前'}</div>
                <div className='back' style={{ width: x, height: y, transform: `translateZ(${-z / 2}px) rotateY(180deg)`, background: bgB }}>{_txtB || debug && '后'}</div>
                <div className='top' style={{ width: x, height: z, transform: `translateY(${-z / 2}px) rotateX(90deg)`, background: bgT }}>{_txtT || debug && '上'}</div>
                <div className='bottom' style={{ width: x, height: z, transform: `translateY(${(y - z / 2)}px) rotateX(-90deg)`, background: bgBt }}>{_txtBT || debug && '下'}</div>
                <div className='left' style={{ width: z, height: y, transform: `translateX(${-z / 2}px) rotateY(-90deg)`, background: bgL }}>{_txtL || debug && '左'}</div>
                <div className='right' style={{ width: z, height: y, transform: `translateX(${x - z / 2}px) rotateY(90deg)`, background: bgR }}>{_txtR || debug && '右'}</div>
            </div>
        </div>

        {/* <CtrlBoard /> */}
        {debug && <div className={'ctrlBar'}>
            <br />
            <br />
            <br />
            <h4>旋转</h4>
            <div className={'rotate'}>
                X轴<input type="range" min='-180' max='180' value={rX} onChange={e => dispatch({ type: 'rX', payload: e.target.value })} /><output>{rX}度</output><br />
                Y轴<input type="range" min='-180' max='180' value={rY} onChange={e => dispatch({ type: 'rY', payload: e.target.value })} /><output>{rY}度</output><br />
                Z轴<input type="range" min='-180' max='180' value={rZ} onChange={e => dispatch({ type: 'rZ', payload: e.target.value })} /><output>{rZ}度</output><br />
            </div>
            <h4>缩放</h4>
            <div className={'size'}>
                长<input type="range" min='1' max='1000' value={x} onChange={e => dispatch({ type: 'x', payload: e.target.value - 0 })} /><output>{x}像素</output><br />
                宽<input type="range" min='1' max='1000' value={y} onChange={e => dispatch({ type: 'y', payload: e.target.value - 0 })} /><output>{y}像素</output><br />
                厚<input type="range" min='1' max='1000' value={z} onChange={e => dispatch({ type: 'z', payload: e.target.value - 0 })} /><output>{z}像素</output><br />
            </div>

            <h4>颜色</h4>
            <div className={'color'}>
                前 <input type="color" value={bgF} onChange={e => dispatch({ type: 'bgF', payload: e.target.value })} />{bgF}<br />
                后 <input type="color" value={bgB} onChange={e => dispatch({ type: 'bgB', payload: e.target.value })} />{bgB}<br />
                上 <input type="color" value={bgT} onChange={e => dispatch({ type: 'bgT', payload: e.target.value })} />{bgT}<br />
                下 <input type="color" value={bgBt} onChange={e => dispatch({ type: 'bgBt', payload: e.target.value })} />{bgBt}<br />
                左 <input type="color" value={bgL} onChange={e => dispatch({ type: 'bgL', payload: e.target.value })} />{bgL}<br />
                右 <input type="color" value={bgR} onChange={e => dispatch({ type: 'bgR', payload: e.target.value })} />{bgR}<br />
            </div>
        </div>}
    </>
    )
}
